import React ,{useState ,useEffect} from 'react'
import { useNavigate } from 'react-router-dom';
import { useDispatch ,useSelector} from 'react-redux';
import axios from 'axios';
import '../../Api/DataList';
import { ALLLIST,STORETYPE ,EDITBTN ,CLEARBTN} from '../../Type/Store.d';
import { Button, ProductCard ,Tag ,Checkbox ,} from 'react-vant';

function Index() {
    const Navigate = useNavigate();
    const Dispatch = useDispatch();
    const [Editflag,setEditFlag] = useState(true);
    const list = useSelector((state:STORETYPE)=>state.list);
    useEffect(()=>{
        axios.get('/list').then(res=>{
            if(list.length<=0){
                Dispatch({
                    type:ALLLIST,
                    payload:res.data.list,
                })
            }
        })
    },[])
    const BagList = useSelector((state:STORETYPE)=>state.BagList);

    return (
        <div className='Index'>
            <div className='nav' style={{ display: "flex",justifyContent: "space-between"}}>
                您正在阅读 {useSelector((state:STORETYPE)=>state.BagList.length as number)} 本书   
                <li style={{ display: "flex",justifyContent: "spaceBetween"}}>
                    <Button type="default" size="mini" plain style={{display: Editflag ? 'none':'Block'}} onClick={()=>{
                        setEditFlag(true)
                    }}>
                        取消
                    </Button>
                    <Button type={ Editflag ? 'default':"warning"} size="mini" plain style={{display: Editflag ? 'none':'Block'}} onClick={()=>{
                        Dispatch({
                            type:CLEARBTN,
                            payload:'',
                        })
                    }}>
                        删除
                    </Button>
                    <Button type={ Editflag ? 'default':"warning"} size="mini" plain style={{display: Editflag ? 'Block':'none'}} onClick={()=>{
                        setEditFlag(false)
                    }}>
                        编辑
                    </Button>
                </li>
            </div>
            <main>
                {
                    BagList && BagList.length>0 ? BagList.map((item,index)=>{
                        return <ProductCard key={index}
                                style={{height:110}}
                                tag="精品"
                                desc={item.con}
                                title={item.txt}
                                tags={ <>
                                    <Tag plain type="warning" style={{ marginRight: 5 }}> {item.sex} </Tag>
                                    <Tag plain type="danger"> {item.type} </Tag>
                                </> }
                                thumb={item.src}
                                footer={
                                <li style={{display: Editflag ? 'none':'block',float: 'right'}}>
                                    <Checkbox checked={item.inpFlag}  onChange={()=>{
                                        Dispatch({
                                            type:EDITBTN,
                                            payload:item,
                                        })
                                    }}/>
                                </li>}
                            />
                    }):"来装满书包吧~"
                }
            
            </main>
        </div>
    )
}

export default Index